<template>
	<div class="pic-list">
		<draggable
			v-model="showUrls"
			group="normal"
			class="drag-list"
			@end="onDragUpdate"
			>
			<template #item="{element}">
				<div class="arco-upload-list-item">
					<div class="arco-upload-list-picture custom-upload-avatar transparent-bg">
						<img :src="element" style="object-fit: contain;"/>
						<div class="arco-upload-list-picture-mask">
							<IconDelete @click="deleteFile(element as string)"/>
						</div>
					</div>
				</div>
			</template>
		</draggable>
		<a-upload multiple :auto-upload="false" :show-file-list="false" @change="onChange" v-if="props.maxLength?state.files.length<props.maxLength:true">
			<template #upload-button>
				<div class="arco-upload-picture-card">
					<div class="arco-upload-picture-card-text">
						<IconPlus />
					</div>
				</div>
			</template>
		</a-upload>
	</div>

</template>
<script setup lang="ts">
import { moveArrElement } from "@/utils";
import CosClient from "@/utils/cos";
import { IconDelete, IconPlus } from "@arco-design/web-vue/es/icon";
import { computed, onBeforeMount, reactive, ref, watch } from "vue";
import draggable from 'vuedraggable';

const props=defineProps<{
	modelValue:string[],
	maxLength?:number,
}>()
const emits = defineEmits(["update:modelValue"]);
const state=reactive<{
	files:{
		file?:File,
		url:string
	}[]
}>({
	files:[],
})

const isFirst=ref(true)
watch(()=>props.modelValue,(newValue,oldValue)=>{
	if(isFirst.value&&newValue.length>0){
		state.files=newValue.map(item=>{
			return {
				file:undefined,
				url:item,
			}
		})
		isFirst.value=false
	}
},{immediate:true})

const showUrls=computed(()=>{
	if(state.files.length>0){
		return state.files.map(item=>item.url)
	}else{
		return props.modelValue
	}
})


const deleteFile=(url:string)=>{
	state.files.forEach((item, index)=>{
		if(item.url===url){
			state.files.splice(index, 1);
		}
	});
	emits("update:modelValue", state.files.map(item=>item.url));
}
const onChange = (fileList, currentFile) => {
	state.files.push({
		file:currentFile.file,
		url:currentFile.url
	})
	if(props.maxLength&&state.files.length>=props.maxLength){
		state.files=state.files.slice(0,props.maxLength)
	}
	emits("update:modelValue", state.files.map(item=>item.url));
};

const doUpload=async ():Promise<void>=>{
	if(state.files.length>0){
		let urls:string[]=[]
		let cos=new CosClient()
		console.log(state.files)
		for (let index = 0; index < state.files.length; index++) {
			const item = state.files[index];
			if(item.file){
				let url=await cos.uploadFile(item.file)
				item.url=url
			}
		}
		urls=state.files.map(item=>item.url)
		emits("update:modelValue", urls);
	}
}

const onDragUpdate=(e)=>{
	state.files=moveArrElement<{
		file?:File,
		url:string
	}>(state.files,e.oldIndex,e.newIndex)!
	emits("update:modelValue", state.files.map(item=>item.url));
}

defineExpose<{
	doUpload:()=>Promise<void>
}>({
	doUpload
})
</script>
<style lang="scss" scoped>
.pic-list{
	display: flex;
	flex-wrap: wrap;
	.drag-list{
		display: flex;
		flex-wrap: wrap;
	}
	.arco-upload-list-item{
		margin-top: 0;
	}
}
</style>
